<link rel="stylesheet" href="./iconfont/iconfont.css">
<style>
    .leval1{
        margin-left:10px;
    }
    .leval2{
        margin-left:25px;
        display:none;
    }
    .leval3{
        margin-left:50px;
        display:none;
    }
    .leval{
        list-style: none;
    }

</style>

<ul class='tree'></ul>
<script src="http://unpkg.zhimg.com/jquery"></script>

<script src="./tree.js"></script>
<script src="./arr.js"></script>

<script>

    
    //生成一级数据
    let father=getTree(arr,0)
    console.log(father);
    
    $.each(father,(i,item)=>{
        $('.tree').append(`<li class='leval leval1' id='${item.id}'><span class="iconfont icon-caidanzhedie"></span>${item.name}</li>`)
        // $('.tree').append(`<li class='leval leval1' id='${item.id}' pid="0"><span class="iconfont icon-caidanzhedie">+</span>${item.name}</li>`)

        //生成二级数据
        if (item.children && item.children.length>0){
            $.each(item.children,(i2,item2)=>{
            $('.tree').append(`<li class='leval leval2' id='${item2.id}' pid='${item.id}'><span class="iconfont icon-caidanzhedie"></span>${item2.name}</li>`)
            // $('.tree').append(`<li class='leval leval2 id="${item2.id}" pid="${item.id}"><span class="iconfont icon-caidanzhedie">+</span>${item2.name}</li>`)

            //生成三级数据
            if (item2.children && item2.children.length>0){
                $.each(item2.children,(i3,item3)=>{
                $('.tree').append(`<li class='leval leval3' id="${item3.id}" pid="${item2.id}">${item3.name}</li>`)
            })
            }
            
        })
        }
        
    })
    
    // $('.tree').on('click','li',function(){
        $('li').click(function(){
        console.log(this);
        
        if($(this).find('span').hasClass('icon-caidanzhedie')){
            
            let id=String($(this).attr('id')).replaceAll(' ','')
            console.log($(this).attr('id'));
            
            console.log(1);
            
            $(`li[pid=${id}]`).show()
            $(this).find('span').removeClass('icon-caidanzhedie')
            $(this).find('span').addClass('icon-caidanzhankai')
        }else if($(this).find('span').hasClass('icon-caidanzhankai')){
            let id=$(this).attr('id')
            console.log($(this).attr('id'));
            
            console.log(2);
            
            $(`li[pid=${id}]`).hide()
            $(this).find('span').removeClass('icon-caidanzhankai')
            $(this).find('span').addClass('icon-caidanzhedie')
        }else{
            return
        }

    })
   


</script>